<template>
  <div>
    <div class="div2">
      <img src="../assets/beijing2.png" alt="" />
    </div>
    <div class="div3">
      <div class="div3_next">时令热搜</div>
    </div>
    <div class="div4">
      <div class="div4_item">
        <el-row class="an_niu">
          <el-button type="primary" round><router-link to="/recipemh/白切鸡">白切鸡</router-link></el-button>
          <el-button round class="bs"><router-link to="/recipemh/回锅肉">回锅肉</router-link></el-button>
          <el-button type="info" round><router-link to="/recipemh/蒜苗">蒜苗</router-link></el-button>
          <el-button type="warning" round><router-link to="/recipemh/鸡翅">鸡翅</router-link></el-button>
          <el-button type="danger" round><router-link to="/recipemh/水果茶">水果茶</router-link></el-button>
        </el-row>
        <el-row class="an_niu2">
          <el-button type="warning" round><router-link to="/recipemh/蒸蛋">蒸蛋</router-link></el-button>
          <el-button type="info" round><router-link to="/recipemh/豆腐">豆腐</router-link></el-button>
          <el-button type="danger" round><router-link to="/recipemh/柠檬蜂蜜茶">柠檬蜂蜜茶</router-link></el-button>
          <el-button round class="bs"><router-link to="/recipemh/可乐鸡翅">可乐鸡翅</router-link></el-button>
          <el-button type="primary" round><router-link to="/recipemh/粉条">粉条</router-link></el-button>
        </el-row>
        <el-row class="an_niu3">
          <el-button type="primary" round><router-link to="/recipemh/黄瓜">黄瓜</router-link></el-button>
          <el-button type="danger" round><router-link to="/recipemh/奶昔">奶昔</router-link></el-button>
          <el-button round class="bs"><router-link to="/recipemh/糖醋排骨">糖醋排骨</router-link></el-button>
          <el-button type="info" round><router-link to="/recipemh/蒜苗">蒜苗</router-link></el-button>
          <el-button type="warning" round><router-link to="/recipemh/猪肉">猪肉</router-link></el-button>
        </el-row>
      </div>
    </div>
    <div class="div5_item" v-if="recipe[0]" @mousewheel="movem1()">
      <div class="div5_item_text">
        <div class="div5_item_text_one">最新食谱</div>
        <div class="el-icon-caret-right"></div>
      </div>
      <div class="div5_item_content">
        <div class="zy_div1_text_item_con22">
          <div class="zy_div1_text_item_con22_lef">
            <h2 class="zy_div1_text_item_con22_lef_1">简介</h2>
            <div class="zy_div1_text_item_con22_lef_2">briefly</div>
          </div>
          <div class="zy_div1_text_item_con22_rig">
            <div class="zy_div1_text_item_con22_rig_con">
              <div style="margin-left: 10px; font-size: 17px; font-weight: 600">
                {{ recipe[0].rname }}
              </div>
              <div style="margin: 10px; text-indent: 2em ;font-size: 13px;">
                {{ recipe[0].synopsis }}
              </div>
            </div>
          </div>
        </div>
        <div class="zy_div1_text_item_con22">
          <div class="zy_div1_text_item_con22_lef">
            <h2 class="zy_div1_text_item_con22_lef_1">材料</h2>
            <div class="zy_div1_text_item_con22_lef_2">stuff</div>
          </div>
          <div class="zy_div1_text_item_con22_rig">
            <div class="zy_div1_text_item_con22_rig_con">
              <div style="margin: 10px; font-size: 13px;">
                <div v-html="recipe[0].material" ></div>
              </div>
            </div>
          </div>
        </div>
      </div>

      <div class="div5_item_next" id="modiv5"></div>
      <div class="zy1_div1_text_item_con22">
        <div class="zy1_div1_text_item_con22_lef">
          <h2 class="zy1_div1_text_item_con22_lef_1">做法</h2>
          <div class="zy1_div1_text_item_con22_lef_2">practice</div>
        </div>
        <div class="zy1_div1_text_item_con22_rig">
          <div class="zy1_div1_text_item_con22_rig_con">
              <div style="margin: 10px;font-size: 13px;">
                <div v-html=" recipe[0].practice" class="zfzf"></div>
              </div>
          </div>
        </div>
      </div>
    </div>
    <div class="div6_item" v-if="recipe[1]" @mousewheel="movem2()">
      <div class="div5_item_text">
        <div class="div5_item_text_one">本周最热</div>
        <div class="el-icon-caret-right"></div>
      </div>
      <div class="div5_item_content">
        <div class="zy_div1_text_item_con22">
          <div class="zy_div1_text_item_con22_lef">
            <h2 class="zy_div1_text_item_con22_lef_1">简介</h2>
            <div class="zy_div1_text_item_con22_lef_2">briefly</div>
          </div>
          <div class="zy_div1_text_item_con22_rig">
            <div class="zy_div1_text_item_con22_rig_con">
              <div style="margin-left: 10px; font-size: 17px; font-weight: 600">
                {{ recipe[1].rname }}
              </div>
              <div style="margin: 10px; text-indent: 2em ;font-size: 13px;">
                {{ recipe[1].synopsis }}
              </div>
            </div>
          </div>
        </div>
        <div class="zy_div1_text_item_con22">
          <div class="zy_div1_text_item_con22_lef">
            <h2 class="zy_div1_text_item_con22_lef_1">材料</h2>
            <div class="zy_div1_text_item_con22_lef_2">stuff</div>
          </div>
          <div class="zy_div1_text_item_con22_rig">
            <div class="zy_div1_text_item_con22_rig_con">
              <div style="margin: 10px;  font-size: 13px;">
                <!-- {{ recipe[15].material }} -->
                <div style="font-size: 13px;" v-html="recipe[1].material"></div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="div6_item_next" id="modiv6"></div>
      <div class="zy1_div1_text_item_con22">
        <div class="zy1_div1_text_item_con22_lef">
          <h2 class="zy1_div1_text_item_con22_lef_1">做法</h2>
          <div class="zy1_div1_text_item_con22_lef_2">practice</div>
        </div>
        <div class="zy1_div1_text_item_con22_rig">
          <div class="zy1_div1_text_item_con22_rig_con">
              <div style="margin: 10px; font-size: 13px;">
                <!-- {{ recipe[15].practice }} -->
                <div v-html="recipe[1].practice" class="zfzf"></div>
              </div>
          </div>
        </div>
      </div>
    </div>
    <div class="div7_item" v-if="recipe[2]" @mousewheel="movem3()">
      <div class="div5_item_text">
        <div class="div5_item_text_one">最新食谱</div>
        <div class="el-icon-caret-right"></div>
      </div>
      <div class="div5_item_content">
        <div class="zy_div1_text_item_con22">
          <div class="zy_div1_text_item_con22_lef">
            <h2 class="zy_div1_text_item_con22_lef_1">简介</h2>
            <div class="zy_div1_text_item_con22_lef_2">briefly</div>
          </div>
          <div class="zy_div1_text_item_con22_rig">
            <div class="zy_div1_text_item_con22_rig_con">
              <div style="margin-left: 10px; font-size: 17px; font-weight: 600">
                {{ recipe[2].rname }}
              </div>
              <div style="margin: 10px; text-indent: 2em ;font-size: 13px;line-height: 25px;">
                {{ recipe[2].synopsis }}
              </div>
            </div>
          </div>
        </div>
        <div class="zy_div1_text_item_con22">
          <div class="zy_div1_text_item_con22_lef">
            <h2 class="zy_div1_text_item_con22_lef_1">材料</h2>
            <div class="zy_div1_text_item_con22_lef_2">stuff</div>
          </div>
          <div class="zy_div1_text_item_con22_rig">
            <div class="zy_div1_text_item_con22_rig_con">
              <div style="margin: 10px; font-size: 13px;">
                <!-- {{ recipe[8].material }} -->
                <div v-html="recipe[2].material" ></div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="div7_item_next" id="modiv7"></div>
      <div class="zy1_div1_text_item_con22">
        <div class="zy1_div1_text_item_con22_lef">
          <h2 class="zy1_div1_text_item_con22_lef_1">做法</h2>
          <div class="zy1_div1_text_item_con22_lef_2">practice</div>
        </div>
        <div class="zy1_div1_text_item_con22_rig">
          <div class="zy1_div1_text_item_con22_rig_con">
              <div style="margin: 10px; font-size: 13px;">
                <!-- {{ recipe[8].practice }} -->
                <div v-html="recipe[2].practice" class="zfzf"></div>
              </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  mounted() {
    this.getdata();
    // this.open();
  },
  data() {
    return {
      recipe: [],
      uname: "",
      upwd: "",
      // hide: "false",
      activeName: "second",
      gundong1: 150,
      gundong2: 150,
      gundong3: 150,
    };
  },
  methods: {
    movem1() {
      //监听鼠标滚动事件，滚动触发背景图移动事件
      if (event.wheelDelta > 0) {
        this.gundong1 += 30;
        if (this.gundong1 >= 180) {
          this.gundong1 = 180;
        }
      } else {
        this.gundong1 -= 30;
        if (this.gundong1 <= 30) {
          this.gundong1 = 30;
        }
      }
      console.log(event.wheelDelta);
      let aaa = document.getElementById("modiv5");
      aaa.style.backgroundPositionY = this.gundong1 + "px";
    },
    movem2() {
      if (event.wheelDelta > 0) {
        this.gundong2 += 30;
        if (this.gundong2 >= 180) {
          this.gundong2 = 180;
        }
      } else {
        this.gundong2 -= 30;
        if (this.gundong2 <= 30) {
          this.gundong2 = 30;
        }
      }
      let bbb = document.getElementById("modiv6");
      bbb.style.backgroundPositionY = this.gundong2 + "px";
    },
    movem3() {
      if (event.wheelDelta > 0) {
        this.gundong3 += 30;
        if (this.gundong3 >= 180) {
          this.gundong3 = 180;
        }
      } else {
        this.gundong3 -= 30;
        if (this.gundong3 <= 30) {
          this.gundong3 = 30;
        }
      }
      let ccc = document.getElementById("modiv7");
      ccc.style.backgroundPositionY = this.gundong3 + "px";
    },
    getdata() {
      const url = "/rlist";
      this.axios.get(url).then((res) => {
        console.log(res);
        this.recipe = res.data.data;
      });
    },
    // open() {
    //   this.hide = !this.hide;
    // },
    handleClick(tab, event) {
      console.log(tab, event);
    },
  },
};
</script>

<style lang="scss">
.div2 > img {
  min-width: 800px;
  width: 100%;
}
.div3 {
  min-width: 800px;
  width: 100%;
  height: 50px;
  display: flex;
  justify-content: center;
  align-items: center;
}
.div3_next {
  width: 100px;
  height: 50px;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 25px;
}
.div4 {
  min-width: 800px;
  width: 100%;
  min-height: 200px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.div4_item {
  width: 600px;
  height: 150px;
  border-radius: 25px;
}

.an_niu {
  margin-left: 15px;
  margin-top: 8px;
}
.an_niu2 {
  margin-left: 50px;
  margin-top: 8px;
}
.an_niu3 {
  margin-top: 8px;
}
.div5_item {
  width: 100%;
  height: 1200px;
  display: flex;
  align-items: center;
  background-color: #ffffff;
  border: 1px solid #928f89;
  flex-direction: column;
}
.div5_item_text {
  width: 1200px;
  height: 50px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  color: #909399;
}
.div5_item_text:hover {
  color: #ff8251;
}
.div5_item_next {
  width: 1200px;
  height: 400px;
  background-image: url("../assets/s01.jpg");
  background-repeat: no-repeat;
  background-size: 1200px;
  background-attachment: fixed;
  border-radius: 25px;
  margin-top: 140px;
  /* background-position: 50% 131.93px; */
  transition: 0.1s;
  background-position-x: 50%;
  /* background-position-y:131.93px; */
}
.div5_item_text_one {
  font-size: 24px;
  font-weight: 600;
}
.div5_item_content {
  width: 1200px;
  height: 60px;
  display: flex;
  justify-content: space-around;
  margin-bottom: 60px;
  margin-top: 30px;
}
.div5_item_content_one {
  width: 400px;
  height: 200px;
  font-size: 20px;
  font-weight: 600;
  color: #434344;
  display: flex;
  /* justify-content: center;  */
  border-radius: 25px;
  background-color: #ffefd5;
  flex-direction: column;
  align-items: center;
  padding-top: 10px;
  cursor: pointer;
  transition: all 0.3s;
}
.div5_item_content_one:hover {
  transform: scale(1.1);
  box-shadow: #ccc 7px 7px 20px 4px;
}
.div5_item_content_one_jian {
  width: 20px;
  height: 20px;
  background-color: #ffe851;
}
.div5_item_content_two {
  width: 400px;
  height: 200px;
  font-size: 20px;
  font-weight: 600;
  color: #434344;
  display: flex;
  /* justify-content: center; */
  border-radius: 25px;
  background-color: #ffefd5;
  flex-direction: column;
  align-items: center;
  padding-top: 10px;
  cursor: pointer;
  transition: all 0.3s;
}
.div5_item_content_two:hover {
  transform: scale(1.1);
  box-shadow: #ccc 7px 7px 20px 4px;
}
.div5_item_content_three {
  width: 800px;
  height: 300px;
  font-size: 20px;
  font-weight: 600;
  color: #434344;
  display: flex;
  justify-content: center;
  border-radius: 25px;
  background-color: #ffefd5;
  margin-top: 20px;
  flex-direction: column;
  align-items: center;
  cursor: pointer;
  transition: all 0.3s;
}
.div5_item_content_three:hover {
  transform: scale(1.1);
  box-shadow: #ccc 7px 7px 20px 4px;
}
.div5_item_content_one > div:nth-child(2) {
  width: 250px;
  margin-top: 10px;
  font-size: 16px;
}
.div5_item_content_two > div:nth-child(2) {
  width: 250px;
  margin-top: 10px;
  font-size: 16px;
}
.div6_item {
  width: 100%;
  height: 1200px;
  display: flex;
  align-items: center;
  background-color: #ffffff;
  border: 1px solid #928f89;
  flex-direction: column;
  background-size: 1200px;
}
.div6_item_next {
  width: 1200px;
  height: 400px;
  background-image: url("../assets/s02.jpg");
  background-repeat: no-repeat;
  background-size: 1200px;
  background-attachment: fixed;
  border-radius: 25px;
  margin-top: 140px;
  transition: 0.1s;
  /* background-position: 50% 131.93px; */
  background-position-x: 50%;
}
.div7_item {
  width: 100%;
  height: 1200px;
  display: flex;
  align-items: center;
  background-color: #ffffff;
  border: 1px solid #928f89;
  flex-direction: column;
}
.div7_item_next {
  width: 1200px;
  height: 400px;
  background-image: url("../assets/s03.jpg");
  background-repeat: no-repeat;
  background-size: 1200px;
  background-attachment: fixed;
  border-radius: 25px;
  margin-top: 140px;
  transition: 0.1s;
  /* background-position: 50% 131.93px; */
  background-position-x: 50%;
}

.zy_div1_text_item_con22 {
  width: 500px;
  height: 220px;
  margin-left: 20px;
  border-radius: 20px;
  display: flex;
  align-items: center;
  margin-top: 10px;
  background-color: #e9eaec;
  box-shadow: 7px 7px 20px 4px #AAAAAA;
}
.zy_div1_text_item_con22_lef {
  width: 80px;
  height: 220px;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  border-top-left-radius: 20px;
  border-bottom-left-radius: 20px;
  background-color: #ffe851;
}
.zy_div1_text_item_con22_lef_1 {
  margin: 0;
}
.zy_div1_text_item_con22_lef_2 {
  font-size: 12px;
  font-weight: 600;
}

.zy_div1_text_item_con22_rig_con {
  width: 400px;
  height: 180px;
  border-top-right-radius: 20px;
  border-bottom-right-radius: 20px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  background-color: #ffffff;
    div{
      line-height: 25px;
      font-size: 13px;
    }
}
.zfzf{
  font-size: 15px;
  line-height: 30px;
  margin-left: 15px;
}
.zy_div1_text_item_con22_rig_con_item {
  width: 220px;
  height: 20px;
  padding: 10px 10px;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-left: 5px;
  font-size: 13px;
  background-color: #f5f5f5;
  border-radius: 20px;
}

.zy1_div1_text_item_con22 {
  width: 850px;
  height: 300px;
  margin-left: 20px;
  margin-top: 20px;
  border-radius: 20px;
  display: flex;
  align-items: center;
  margin-top: 75px;
  background-color: #e9eaec;
  box-shadow: 7px 7px 20px 4px #aaaaaa;
}
.zy1_div1_text_item_con22_lef {
  width: 80px;
  height: 300px;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  border-top-left-radius: 20px;
  border-bottom-left-radius: 20px;
  background-color: #ffe851;
}
.zy1_div1_text_item_con22_lef_1 {
  margin: 0;
}
.zy1_div1_text_item_con22_lef_2 {
  font-size: 12px;
  font-weight: 600;
}

.zy1_div1_text_item_con22_rig_con {
  width: 740px;
  height: 250px;
  border-top-right-radius: 20px;
  border-bottom-right-radius: 20px;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  background-color: #ffffff;
  
}
.zy1_div1_text_item_con22_rig_con_item {
  width: 220px;
  height: 20px;
  padding: 10px 10px;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-left: 5px;
  font-size: 13px;
  background-color: #f5f5f5;
  border-radius: 20px;
}
.el-button{
  a{
    color: #fff;
  }
}
.bs{
    a{
      color: #000;
    }
  }
</style>